---
description: Компонент для позиционирования элементов, построенный на базе flex layout.
---

<Overview group="layout">

# Flex [tag:component]

Компонент для позиционирования элементов, построенный на базе [flex layout](https://developer.mozilla.org/ru/docs/Learn_web_development/Core/CSS_layout/Flexbox).

</Overview>

> **Важное замечание о поддержке браузеров**
>
> Компонент `Flex` в современных браузерах:
>
> - Chrome 87+
> - Edge 87+
> - Safari 14.1+
> - Firefox 66+
> - Opera 73+
>
> использует нативное `CSS`-свойство `gap` для реализации отступов между элементами.
> Для более старых версий браузеров автоматически применяется альтернативное решение с использованием `margin`,
> но в таком случае у вас могут появляться визуальные артефакты (например, если вы задаёте фоновый цвет).

<Playground>
  ```jsx
  <Flex gap="m" justify="center">
    <Avatar size={48} initials="ДС" gradientColor="orange" />
    <Avatar size={48} initials="ИМ" gradientColor="yellow" />
    <Avatar size={48} initials="ВЖ" gradientColor="violet" />
    <Avatar size={48} initials="ЭМ" gradientColor="green" />
  </Flex>
  ```
</Playground>

## Направление главной оси

Свойство `direction` эквивалентно `CSS`-свойству `flex-direction` и контролирует расположение дочерних элементов.

- `"row"` — элементы располагаются в ряд слева направо (для `ltr` языков) или справа налево (для `rtl` языков) (по умолчанию);
- `"column"` — элементы располагаются в столбец.

### Инвертированное направление

Задаётся свойством `reverse`.

- `true` — применяется инвертированный порядок, эквивалентно `CSS`-свойствам `flex-direction: row-reverse` и `flex-direction: column-reverse`,
  в зависимости от указанного `direction`;
- `false` — инвертированный порядок не применяется (по умолчанию).

## Отступ между элементами

Задаётся свойством `gap`.

Принимает значение либо числовое (в пикселях), либо из списка предопределённых
дизайн-системой значений (`"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"`).

При передаче примитивного значения отступы между строками и столбцами будут одинаковы и равны переданному значению.
При передаче массива (`[row, column]`) есть возможность задать разные значения
для строк (первый элемент массива) и столбцов (второй элемент массива).

## Выравнивание контента

### Выравнивание по главной оси

Задаётся свойством `justify` и эквивалентно `CSS`-свойству `justify-content`.

- `"start"` — элементы располагаются в начале главной оси;
- `"end"` — элементы располагаются в конце главной оси;
- `"center"` — элементы располагаются по центру главной оси;
- `"space-around"` — элементы располагаются равномерно по главной оси, с отступом по бокам;
- `"space-between"` — элементы располагаются равномерно по главной оси, первый и последний элементы прижимаются к краям контейнера;
- `"space-evenly"` — элементы располагаются так, что расстояние между любыми двумя соседними элементами одинаково.

### Выравнивание по вспомогательной оси

Задаётся свойством `align` и эквивалентно `CSS`-свойству `align-items`.

- `"start"` — элементы располагаются в начале вспомогательной оси;
- `"end"` — элементы располагаются в конце вспомогательной оси;
- `"center"` — элементы располагаются по центру вспомогательной оси;
- `"stretch"` — элементы растягиваются на всё доступное пространство по вспомогательной оси;
- `"baseline"` — элементы располагаются по базовой линии.

## Перенос строк

По умолчанию дочерние элементы компонента `Flex` переносятся на следующую строку при переполнении контейнера.

Свойство `noWrap` позволяет отключить перенос контента (позволяет выходить за пределы родителя).

- `true` — перенос отключен;
- `false` — перенос включен, эквивалентно `flex-wrap: nowrap` (по умолчанию).

## Отступы вокруг контейнера

Задаётся свойством `margin`.

- `"none"` — отступы отсутствуют (по умолчанию);
- `"auto"` — включены платформенные отступы.

Значение `margin="auto"` нужно для того, чтобы визуально выравнивать контент во `Flex` с остальными компонентами
VKUI (например, [`Header`](/components/group#header) и [`SimpleCell`](/components/simple-cell)).
Поэтому его использование обычно актуально только для верхнеуровневых компонентов `Flex`.

<Playground>
  ```jsx
  <Group mode="card" header={<Header size="s">Друзья</Header>}>
    <Flex gap="m" justify="center" margin="auto">
      <Avatar size={48} initials="ДС" gradientColor="orange" />
      <Avatar size={48} initials="ИМ" gradientColor="yellow" />
      <Avatar size={48} initials="ВЖ" gradientColor="violet" />
      <Avatar size={48} initials="ЭМ" gradientColor="green" />
    </Flex>
  </Group>
  ```
</Playground>

## ~Flex.Item~ [tag:component]

> Подкомпонент устарел. Используйте `Flex`, который теперь принимает все свойства `Flex.Item`.

Подкомпонент `Flex.Item` используется как обёртка для дочерних элементов компонента `Flex` в случае, когда нужно
переопределить `flex`-свойства этих элементов, например, `flex-basis`:

<Playground>
  ```jsx
  <Flex gap="m" justify="center" margin="auto">
    <Card Component="div">Колонка</Card>
    <Flex.Item flexBasis={100}>
      <Card Component="div">Ширина 100px</Card>
    </Flex.Item>
    <Flex flexBasis={100}>
      <Card Component="div">Я лучше Ширина 100px</Card>
    </Flex>
    <Card Component="div">Колонка</Card>
  </Flex>
  ```
</Playground>

## Свойства компонентов раскладки

> Компонент `Flex` обладает общими свойствами, которые позволяют управлять отступами, размерами, позиционированием,
> переполнением и flex-свойствами.
> Подробнее про эти свойства можно почитать на соответствующей странице [`Box`](/components/box/#layout-props).

## Свойства и методы [#api]

<PropsTable name="Flex">
### Flex [#flex-api]

### Flex.Item [#flex-item-api]

</PropsTable>
